<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<form class="layui-form" action="" lay-filter="search-form">
    <div class="layui-inline" style="margin-top: 10px">
        <label class="layui-form-label">商品名称</label>
        <div class="layui-input-inline">
            <input type="text" name="name" autocomplete="off" class="layui-input"/>
        </div>
    </div>
    <div class="layui-inline" style="margin-top: 10px">
        <label class="layui-form-label">用户类型</label>
        <div class="layui-input-inline">
            <select name="providerId" id="providerId">
                <option value="">请选择</option>
            </select>
        </div>
        <button class="layui-btn" lay-submit lay-filter="search-btn"><i class="layui-icon">&#xe615;</i>搜索
        </button>
    </div>
</form>

<script>
//在页面里只出现一次，作用类似document.ready
layui.use(['table', 'form'], function () {
    var table = layui.table;
    var form = layui.form;
    form.render()
    getProviderList('#providerId')
    function getProviderList(id){
        $.ajax({
            url:"/bill?act=pro",
            method:"post",
            success:function(res){
                $.each(res,function(i,obj){
                    $(id).append('<option value="'+obj.id+'">'+obj.name+'</option>')
                })
                form.render()
            }
        })
    }
    form.on('submit(search-btn)', function (data) {
        var data1 = form.val("search-form");
        console.log(data1)
        return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
    });
    //表单取值
//    layui.$('#LAY-component-form-getval').on('click', function(){
//        var data = form.val('example');
//        alert(JSON.stringify(data));
//    });
})
</script>